<template>
  <div class="account-cancel-container">
    <el-card class="account-cancel-card">
      <!-- 使用面包屑进行组织参考csdn -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="margin: 20px 0px 30px 0px"
      >
        <!-- 这个el的跳转和vue-link类似 -->
        <el-breadcrumb-item
          :to="{ path: '/accountInformation/account-setting' }"
          >账号设置</el-breadcrumb-item
        >
        <el-breadcrumb-item>账号注销</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="account-cancel-content">
        <el-row>
          <el-col :span="24" class="text-notice">
            <h2>账号注销则视为您主动放弃以下资产和权益，且同意以下规则：</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-notice">
            <p>
              1.注销账号后，您将无法登录、使用当前账号，且不支持找回任何个人资料。
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-notice">
            <p>2.该账号将解除与其他产品的绑定或授权关系，且不支持找回。</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-notice">
            <p>3.将不再支持使用已注销账号的用户ID注册新的账号。</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-notice">
            <p>
              4.注销此平台账号并不代表您注销前的账号行为和相关责任得到豁免或减轻。
            </p>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" id="cancel-button">
          <el-col :span="12">
            <el-button round type="danger" @click="handleAccountCancel"
              >已悉知，确认注销账号</el-button
            ></el-col
          >
        </el-row>
      </div>
    </el-card>
  </div>
</template>
  
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { cancelUserAccount } from "@/apis/apis";

@Component({
  name: "accountCancel",
})
export default class accountCancel extends Vue {
  handleAccountCancel() {
    this.$confirm("此操作将永久删除该账号, 是否继续?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        cancelUserAccount()
          .then((res) => {
            if (res.data.code === "200") {
              this.$message.success("账号注销成功！");
              // !TODO:清空本地存储
              localStorage.clear();
              sessionStorage.removeItem("store");
              this.$router.push("/login");
            } else {
              this.$message.error("账号注销失败！");
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error("账号注销失败！");
          });
      })
      .catch(() => {
        this.$message.info("已取消注销账号操作");
      });
  }
}
</script>
  
<style lang="scss" scoped>
.account-cancel-container {
  display: flex;
  justify-content: center;
  // width: 1370px;
  // margin: 0 auto;
  width: 100%;
  height: 480px;
  .account-cancel-card {
    // width: 1050px;
    // height: 500px;
    width: 100%;
    height: 100%;
    .account-cancel-content {
      /* height: auto; */
      //   border: 1px solid red;
      padding: 30px;
      .el-row {
        margin-bottom: 20px;
      }
      #cancel-button {
        margin-top: 40px;
      }

      .text-notice {
        text-align: start;
      }
    }
  }
}
</style>